<template>
  <div class="xiangqingqu">
    <div class="product-box">
      <ul class="title">
        <li @click="goIndex" class="tiaozhuan">首页</li>
        <li>>{{danshang.name}}</li>
      </ul>
      <div class="chanpintu">
        <div class="datu">
        <!-- 放大镜组件标签 -->
          <get-big :width="300" :height="300" :minIMGsrc="tupian" :scale="2" />
        </div>
        <div class="xiaotu">
          <img v-for="item in lunbos" :key="item.id" :src="item.path" @mouseenter="xuanxiangka(item.path)">
        </div>
      </div>

     <!-- 页面右边详情介绍区 -->
      <div class="jieshao">
        <p>{{danshang.name}}</p>
        <p>{{danshang.desc}}</p>
        <p>价格<span>￥{{danshang.price}}</span></p>
        <p>促销: <span>购买即赠商城积分，积分可抵现~</span> </p>
        <p>服务说明:
          <select>
            <option value="">广东</option>
            <option value="">广西</option>
            <option value="">台湾</option>
          </select>
          <span>现货</span>
        </p>
        <p>选择套餐 <button>标配</button></p>
        <p>选择颜色 <button>星空灰</button></p>
        <div class="tuijian">
          <p>推荐</p>
          <button>耳机</button>
          <button>充电器</button>
        </div>
        <p>已选择商品:标配/星空灰</p>
        <div class="shuliang">
          <div class="number">
            <input type="text" v-model="buy_num">
            <div class="anniu">
              <button :disabled="buy_num >= danshang.stock_num" @click="buy_num++">+</button>
              <button :disabled="buy_num <= 0" @click="buy_num--">-</button>
            </div>
          </div>
          <button class="car" @click="goCar">加入购物车 <i class="el-icon-goods"></i> </button>
          <button class="xiadan">立即下单 <i class="el-icon-caret-right"></i> </button>
        </div>

        <!-- 点击加入购物车，数据成功提交后的弹窗组件 -->
        <el-dialog title="添加成功" :visible.sync="dialogVisible" width="30%">
      <span>商品已成功加入购物车！</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">继续添加商品</el-button>
        <el-button type="danger" @click="goCart">去购物车结算</el-button>
      </span>
    </el-dialog>

      </div>
    </div>
    <ul class="xiangqingqu">
      <!-- $event是事件对象，给它绑定添加点击后的样式  -->
      <li @click="change(index,$event)" v-for="e,index in xuan" data-value="index" ref="c">{{e}}</li>
    </ul>
    <div v-html="danshang.rich_text" class="xiangqingtu" v-show="isShow==0"></div>
    <!-- v-show适用于很高使用频率的场景，调整display属性,结构还存在 -->
    <div v-show="isShow==1" class="guige"></div>
    <div v-show="isShow==2" class="baozhuang"></div>
    <div v-show="isShow==3" class="pinglun"></div>
    <div class="kongge"></div>
  </div>

  
</template>

<script>
//引入请求单个商品数据的函数,引入添加购物车数据的函数
import { getGoodsDetail, addCar } from "@/assets/request.js"

//终端安装完放大镜插件后，引入放大镜功能插件
// import ImageZoomer from "ht-image-zoomer"
import getBig from "@/components/getBig";
export default {
  name: 'detail',

  //组件数据
  data() {
    return {

      //准备一个对象接收单个商品的信息（它是一个对象所以用一个对象来接）
      danshang: {},

      //商品选购数量变量
      buy_num: 1,

      //准备一个变量接收选项卡商品图src地址
      tupian: "",

      //准备一个v-show展示的变量
      isShow: 0,

      //选项li数组
      xuan: ['商品详情', '规格参数', '包装与售后', '用户评论(3万+)'],

      //配置swiper
      // swiperOptions: {
      //   //切换效果
      //   effect: "fade",
      //   autoplay: true,

      //   //循环模式
      //   loop: true,

      //   //分页器
      //   pagination: {
      //     el: ".swiper-pagination",
      //   },

      // },

      //准备存放轮播图的数组
      lunbos: [],

      activeName: 'first',

        //弹框组件可视化 初始值为false不显示
        dialogVisible: false,
    }
  },

  //方法---路由跳转
  methods: {
    goIndex() {
      this.$router.push({
        name: "Index",
      })
    },

    //点击添加购物车后，携带选好的购买数量，和页面当前商品id
    async goCar() {
      let ID = this.$route.params.id
      // let token = sessionStorage.getItem("token")

      let res = await addCar({
        // token,
        goods_id: ID,
        num: this.buy_num,
        project_id: "267",

      })
      console.log(res);  //此时status状态码为200，地址的购物车数量已更新
      this.dialogVisible = true
    },

    goCart(){
      this.$router.push({
        name:"cart",
      })

    },

    xuanxiangka(src) {
      this.tupian = src

    },

    change(index, e) {

      //v-show展示功能，利用index和isShow的值是否相等来展示内容
      this.isShow = index;

      //通过refs获取dom节点，给节点标签设置了ref'c' c是4个li的数组，遍历它，使用排它功能
      this.$refs.c.forEach((item) => {
        //把四个li的a样式清除
        item.classList.remove("a")
      })

      //e是传入的事件对象，给对应的事件对象添加a样式
      e.target.classList.add("a")
    },

  },

  // //注册组件
  components: {
    //放大镜组件
    // ImageZoomer,
    'get-big': getBig
  },

  // //swiper组件标配默认设置
  // directives: {
  //   swiper: directive,
  //   },


  //生命钩子---发送ajax请求，GoodCard跳转时带了id参数，这里调用请求单个商品详细信息的函数，
  async mounted() {

    //获取单个商品id信息
    let res = await getGoodsDetail(
      //给请求函数getGoodsDetail直接传参--路由上的id。
      //路由跳转时携带了id，然后路由js文件里已经动态接收到了id，所以现在可以从路由上直接拿id。id传到请求函数里，到服务器请求对应的单个商品数据，然后返回的数据赋值给res
      this.$route.params.id
    )
    console.log(res); //res是一个对象
    this.danshang = res.data.result;
    // 这时的res就是单个id的商品信息

    //获取商品图数据
    this.lunbos = res.data.result.s_goods_photos
    //获取商品图数组的第一项的图片路径
    this.tupian = this.lunbos[0].path

  },


}

</script>

<style lang='scss' scoped>

.xiangqingqu{
  background-color: gainsboro;

.product-box {
  width: 1400px;
  height: 600px;
  //  border: 1px solid black;
  margin-left: 56px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  background-color: gainsboro;

  .title {
    width: 100%;
    height: 30px;
    // background-color: pink;
    display: flex;
    align-items: center;
    font-size: 13px;
    padding-left: 30px;

    li{
      &:nth-of-type(1){
        font-weight: bold;
        color: #333333;
        font-size: 17px;
      }
    }

    .tiaozhuan {
      letter-spacing: 5px;

      &:hover {
        cursor: pointer;
      }
    }

  }

  .chanpintu {
    width: 500px;
    height: 500px;

    .datu {
      width: 100%;
      height: 350px;
      // background-color: pink;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 300px;
        height: 300px;

      }
    }

    .xiaotu {
      display: flex;
      justify-content: space-around;

      img {
        width: 80px;
        height: 80px;

        &:hover {
          border: 1px solid orangered;
        }

      }
    }
  }

  //  .swiper{
  //   width: 500px;
  //   height: 500px;
  //   border: 1px solid black;
  //   margin: 0;
  //   img{
  //     width: 100%;
  //   }
  //  }


  .jieshao {
    width: 500px;
    height: 500px;
    // border: 1px solid black;

    p {
      margin-bottom: 10px;

      &:nth-of-type(1) {
        font-size: 22px;
        color: gray;
      }

      &:nth-of-type(2) {
        font-size: 12px;
        color: gray;
      }

      &:nth-of-type(3) {
        font-size: 12px;
        color: black;

        span {
          color: red;
          font-size: 22px;
        }
      }

      &:nth-of-type(4) {
        font-size: 12px;
        color: black;

        span {
          color: red;
        }
      }

      &:nth-of-type(5) {
        font-size: 12px;
        color: black;

        span {
          margin-left: 10px;
          color: red;
        }
      }

      &:nth-of-type(6) {
        button {
          width: 70px;
          height: 30px;
          background-color: transparent;
          border: 1px solid grey;
          color: gray;
        }
      }

      &:nth-of-type(7) {
        button {
          width: 80px;
          height: 30px;
          background-color: transparent;
          border: 1px solid grey;
          color: gray;
        }
      }
    }

    .tuijian {
      width: 370px;
      display: flex;

      p {
        width: 60px;
        font-size: 12px;
        color: black;
      }

      button {
        width: 180px;
        height: 74px;
        background-color: transparent;
        border: 1px solid grey;
        margin-right: 15px;
      }
    }

    .shuliang {
      width: 460px;
      height: 55px;
      display: flex;

      .number {
        display: flex;

        input {
          width: 40px;
          height: 50px;
          text-align: center;
          font-size: 16px;
        }

        .anniu {
          width: 15px;

          button {
            width: 25px;
            height: 27px;
            font-size: 12px;
            font-weight: bold;
            text-align: center;

          }

        }


      }

      .car {
        width: 180px;
        height: 55px;
        border: none;
        // background-color: orange;
        background-color: transparent;
        border: 1px solid gray;
        margin: 0px 30px;
        font-size: 20px;
        color: black;
        text-align: center;
        cursor: pointer;

        &:hover{
          background-color: #333333;
          color: white;
          transition: all 0.5s;
        }
      }

      .xiadan {
        width: 180px;
        height: 55px;
        border: none;
        // background-color: orangered;
        background-color: transparent;
        border: 1px solid gray;
        font-size: 20px;
        color: black;
        text-align: center;
        cursor: pointer;

        &:hover{
          background-color: #333333;
          color: white;
          transition: all 0.5s;
        }
      }
    }
  }

}

.xiangqingqu {
  width: 100%;
  height: 70px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;

  li {
    padding: 0px 60px;
    height: 30px;
    line-height: 30px;
    color: gray;
    font-size: 15px;
    cursor: pointer;

    &:hover{
      background-color: #333333;
      color: white;
      transition: all 0.5s;
    }

  }

  .a {
    border-bottom: 3px solid orangered;
    color: orangered;
  }
}

.xiangqingtu {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  img {
    width: 100%;
    display: block;
  }

}

.guige {
  width: 100%;
  height: 50px;
  background-color: blue;
}

.baozhuang {
  width: 100%;
  height: 50px;
  background-color: yellow;
}

.pinglun {
  width: 100%;
  height: 50px;
  background-color: orange;
}

.kongge{
  height: 40px;
}

}
</style>
